<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 500px;height:400px;border: solid 1px black;margin:20px auto}
        #box ul{margin: 0;padding: 0;list-style: none;height: 40px;line-height: 40px;text-align: center;display: flex;border-bottom: solid 1px black;background: #ccc;box-sizing: border-box}
        #box li{flex: 1;border-left:solid 1px black;border-right: solid 1px black}
        #box li.active{background: red}

        .cont{height: 360px;}
        .cont>div{height: 360px;display: none;}
        .cont>.cont1{background: #f66;display: block;}
        .cont>.cont2{background: #f6f;}
        .cont>.cont3{background: #6f6;}
        .cont>.cont4{background: #66f;}
    </style>
</head>
<body>
    <div id="box">
        <ul><li class="active">1</li><li>2</li><li>3</li><li>4</li></ul>
        <div class="cont">
            <div class="cont1">手机</div>
            <div class="cont2">电脑</div>
            <div class="cont3">音箱</div>
            <div class="cont4">桌子</div>
        </div>
    </div>
</body>
<script>
    var ali = document.querySelectorAll("#box li");

    var acont = document.querySelectorAll(".cont>div");

    for(var i=0;i<ali.length;i++){
        ali[i].abc = i;
        ali[i].onclick = function(){
            for(var j=0;j<ali.length;j++){
                ali[j].className = "";
                acont[j].style.display = "none";
            }
            this.className = "active";

            acont[this.abc].style.display = "block";
        }
    }
</script>
</html>